<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}
.editForm .form_alt{width:80px;}
.form_part form{min-width: 1036px;}
</style>

<template>
  <div>
      <!-- <template v-if="routerPath=='trademark'" > -->
        <!-- <div v-loading="loading"> -->
        <div class="main_title">
          <div v-if="!isEdit" class="group_title">添加市场 </div>
          <div v-if="isEdit" class="group_title">修改市场 </div>
        </div>
        <!-- 新增页面 -->
         <!-- <el-dialog title="添加币种" top="0" :modal="false" :lock-scroll="false" class="form_part" :visible.sync="addFormVisible"  :close-on-click-modal="true"> -->
        <div v-if="!isEdit" class="form_part">
          <el-form class="form_l_r"  :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
            <div class="form_left">
              <el-form-item label="买方:" prop="buyCoinId">
                <el-select v-model="addForm.buyCoinId" filterable  placeholder="请选择">
                    <el-option
                    v-for="item in buyCoins"
                    :key="item.coinId"
                    :label="item.name"
                    :value="item.coinId">
                  </el-option>
                  <!-- <el-option label="BTCX" value="1"></el-option>
                  <el-option label="LTC" value="2"></el-option> -->
                </el-select>
                <span class="form_alt">*必填(以后不能修改)</span>
              </el-form-item>
              <el-form-item label="卖方:" prop="sellCoinId">
                <el-select v-model="addForm.sellCoinId" filterable placeholder="请选择">
                   <el-option
                    v-for="item in sellCoins"
                    :key="item.coinId"
                    :label="item.name"
                    :value="item.coinId">
                  </el-option>                
                </el-select>
                <span class="form_alt">*必填(以后不能修改)</span>

              </el-form-item>      
              <el-form-item label="开盘价:" prop="openPrice">
                <el-input v-model="addForm.openPrice" placeholder="请输入实际价格"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item>     
              <el-form-item label="买入手续费:" prop="feeBuy">
                <el-input v-model="addForm.feeBuy" placeholder="请用小数表示，如0.1表示10%"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item>   
              <el-form-item label="卖出手续费:" prop="feeSell">
                <el-input v-model="addForm.feeSell" placeholder="请用小数表示，如0.1表示10%"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item>   
              <el-form-item label="涨幅%:" prop="zhang">
                <el-input v-model="addForm.zhang" placeholder="请用小数表示，如0.1表示10%"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item> 
              <el-form-item label="跌幅%:" prop="die">
                <el-input v-model="addForm.die" placeholder="请用小数表示，如0.1表示10%"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item> 
              <el-form-item label="状态" prop="status">
                <el-select v-model="addForm.status" placeholder="请选择">
                  <el-option label="禁用" value="0"></el-option>                  
                  <el-option label="启用" value="1"></el-option>
                </el-select>
                <span class="form_alt"></span>
              </el-form-item>    
              <el-form-item label="交易区域:" prop="transactionAreaId">
               
                <el-select v-model="addForm.transactionAreaId" filterable placeholder="请选择">
                   <el-option
                    v-for="item in transacitonArea"
                    :key="item.idNo"
                    :label="item.code"
                    :value="item.idNo">
                  </el-option>                
                </el-select>
                <span class="form_alt"></span>
              </el-form-item> 

            </div>
            <div class="form_right">
              <el-form-item label="最小买入:" prop="buyMin">
                <el-input v-model="addForm.buyMin" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>

              </el-form-item> 
              <el-form-item label="最大买入:" prop="buyMax">
                <el-input v-model="addForm.buyMax" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>

              </el-form-item>
              <el-form-item label="最小卖出:" prop="sellMin">
                <el-input v-model="addForm.sellMin" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>

              </el-form-item> 
              <el-form-item label="最大卖出:" prop="sellMax">
                <el-input v-model="addForm.sellMax" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>

              </el-form-item>
              <el-form-item label="单笔最小额度:" prop="tradeMin">
                <el-input v-model="addForm.tradeMin" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>

              </el-form-item> 
              <el-form-item label="单笔最大额度:" prop="tradeMax">
                <el-input v-model="addForm.tradeMax" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>

              </el-form-item>
              <el-form-item label="交易周期:" prop="tradeWeek">
                <el-checkbox-group v-model="addForm.tradeWeek">
                  <el-checkbox label="周一" value="1" name="type"></el-checkbox>
                  <el-checkbox label="周二" value="2" name="type"></el-checkbox>
                  <el-checkbox label="周三" value="3" name="type"></el-checkbox>
                  <el-checkbox label="周四" value="4" name="type"></el-checkbox>
                  <el-checkbox label="周五" value="5" name="type"></el-checkbox>
                  <el-checkbox label="周六" value="6" name="type"></el-checkbox>
                  <el-checkbox label="周日" value="7" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="交易时间:" prop="tradeTime">
                <el-input v-model="addForm.tradeTime" placeholder="格式: 9:00-17:00"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item>
              <el-form-item label="排序:" prop="sorting">
                <el-input v-model="addForm.sorting" placeholder="请输入整数，数字大的排在前面"></el-input>
                <span class="form_alt">*必填</span>
                
              </el-form-item>
              
            </div>
           
          </el-form>
          <div slot="footer" class="dialog-footer  footer-center">
            <el-button type="primary" @click.native="addSubmit('addForm')" :loading="addLoading">提交</el-button>
            <el-button type="primary" @click.native="addCancel">取消</el-button>

          </div>
        </div>
        <!-- </el-dialog> -->

         <!-- 编辑页面 -->
         <!-- <el-dialog title="修改币种" top="0" :modal="false" :lock-scroll="false" class="form_part" :visible.sync="editFormVisible"  :close-on-click-modal="true"> -->
        <div v-if="isEdit" class="form_part">
          <el-form class="form_l_r editForm" :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
            <div class="form_left">
              <el-form-item label="市场名称:" prop="name">
                <el-input v-model="editForm.name" disabled></el-input>                
                <span class="form_alt">*不可修改</span>
              </el-form-item>             
              <el-form-item label="开盘价:" prop="openPrice">
                <el-input v-model="editForm.openPrice" placeholder="请输入实际价格"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item>     
              <el-form-item label="买入手续费:" prop="feeBuy">
                <el-input v-model="editForm.feeBuy" placeholder="请用小数表示，如0.1表示10%"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item>   
              <el-form-item label="卖出手续费:" prop="feeSell">
                <el-input v-model="editForm.feeSell" placeholder="请用小数表示，如0.1表示10%"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item>   
              <el-form-item label="涨幅:" prop="zhang">
                <el-input v-model="editForm.zhang" placeholder="请用小数表示，如0.1表示10%"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item> 
              <el-form-item label="跌幅:" prop="die">
                <el-input v-model="editForm.die" placeholder="请用小数表示，如0.1表示10%"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item> 
              <el-form-item label="状态" prop="status">
                <el-select v-model="editForm.status" placeholder="请选择">
                  <el-option label="禁用" value="0"></el-option>                  
                  <el-option label="启用" value="1"></el-option>
                </el-select>
                <span class="form_alt"></span>
              </el-form-item>     
              <el-form-item label="最小买入:" prop="buyMin">
                <el-input v-model="editForm.buyMin" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>

              </el-form-item> 
            </div>
            <div class="form_right">          
              <el-form-item label="最大买入:" prop="buyMax">
                <el-input v-model="editForm.buyMax" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>

              </el-form-item>
              <el-form-item label="最小卖出:" prop="sellMin">
                <el-input v-model="editForm.sellMin" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>
              </el-form-item> 
              <el-form-item label="最大卖出:" prop="sellMax">
                <el-input v-model="editForm.sellMax" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>

              </el-form-item>
              <el-form-item label="单笔最小额度:" prop="tradeMin">
                <el-input v-model="editForm.tradeMin" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>

              </el-form-item> 
              <el-form-item label="单笔最大额度:" prop="tradeMax">
                <el-input v-model="editForm.tradeMax" placeholder="请输入实际价格，0表示不做限制"></el-input>
                <span class="form_alt"></span>

              </el-form-item>
              <el-form-item label="交易周期:" prop="tradeWeek">
                <el-checkbox-group v-model="editForm.tradeWeek">
                  <el-checkbox label="周一" value="1" name="type"></el-checkbox>
                  <el-checkbox label="周二" value="2" name="type"></el-checkbox>
                  <el-checkbox label="周三" value="3" name="type"></el-checkbox>
                  <el-checkbox label="周四" value="4" name="type"></el-checkbox>
                  <el-checkbox label="周五" value="5" name="type"></el-checkbox>
                  <el-checkbox label="周六" value="6" name="type"></el-checkbox>
                  <el-checkbox label="周日" value="7" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="交易时间:" prop="tradeTime">
                <el-input v-model="editForm.tradeTime" placeholder="格式: 9:00-17:00"></el-input>
                <span class="form_alt">*必填</span>

              </el-form-item>
              <el-form-item label="排序:" prop="sorting">
                <el-input v-model="editForm.sorting" placeholder="请输入整数，数字大的排在前面"></el-input>
                <span class="form_alt">*必填</span>
                
              </el-form-item>
            <!--   <el-form-item label="交易区域:" prop="transactionAreaId">
                <el-select v-model="editForm.transactionAreaId" placeholder="请选择">
                  <el-option label="BTCX" value="1"></el-option>
                  <el-option label="LTC" value="2"></el-option>
                </el-select>
                <span class="form_alt">*必填(以后不能修改)</span>
              </el-form-item>  -->
            </div>
          </el-form>

          <div slot="footer" class="dialog-footer  footer-center">
            <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">提交</el-button>
            <el-button type="primary" @click.native="addCancel">取消</el-button>

          </div>
        </div>
        <!-- </el-dialog> -->
      <!-- </div> -->
      <!-- </template> -->
     <!--   <template v-else>
        <router-view></router-view>
      </template> -->
  </div>

  
  
</template>

<script>
import * as trademark from '../api/trademark';
import * as currency from '../api/currency';
import isvalidPhone from '../api/valide';
import qs from 'qs';
import md5 from 'js-md5';

let myMixin = {
  data: function() {
    return { trademark }
  }
}
var validPhone=(rule, value,callback)=>{
      if (!value){
          callback(new Error('请输入电话号码'))
      }else  if (!isvalidPhone.isvalidPhone(value)){
        callback(new Error('请输入正确的11位手机号码'))
      }else {
          callback()
      }
  }
export default {
  mixins: [myMixin],
  data() {
    return {

      isDel:true,
      isEdit:false,//是否是编辑
      isReleRole:true,
      isReleGroup:true,
      total: 10,
      page: 1,
      showCount:10,
      routerPath:'',
      filters:{name:''},//搜索表单
      editFormVisible:false,//新增页面是否显示,
      editFormVisible:false,//编辑界面是否显示
      addForm:{status:'1',tradeWeek:['周一']},//新增页面数据
      editForm:{type: [],tradeWeek:['1']},//编辑页面数据
      addFormRules:{
        buyCoinId: [
            { required: true, message: '请选择买方币种', trigger: 'blur' }
          ],
        sellCoinId: [
          { required: true, message: '请选择卖方币种', trigger: 'blur' }
        ],
        tradeWeek: [
          { required: true, message: '请选择交易周期', trigger: 'blur' }
        ],
        tradeTime: [
          { required: true, message: '请输入交易时间', trigger: 'blur' }
        ],
      
        openPrice: [
          { required: true, message: '请输入发行价格', trigger: 'blur' }
        ],
        buyMin: [
          { required: true, message: '请输入最小买入量', trigger: 'blur' }
        ],
        buyMax: [
          { required: true, message: '请输入最大买入量', trigger: 'blur' }
        ],
        sellMin: [
          { required: true, message: '请输入最小卖出量', trigger: 'blur' }
        ],
        sellMax: [
          { required: true, message: '请输入最大卖出量', trigger: 'blur' }
        ],
        feeBuy: [
          { required: true, message: '请输入买入手续费率', trigger: 'blur' }
        ],
        feeSell: [
          { required: true, message: '请输入卖出手续费率', trigger: 'blur' }
        ],
        tradeMin: [
          { required: true, message: '请输入单笔最小数量', trigger: 'blur' }
        ],
        tradeMax: [
          { required: true, message: '请输入单笔最大数量', trigger: 'blur' }
        ],
        sorting: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        transactionAreaId: [
          { required: true, message: '请选择交易区域', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
        zhang: [
          { required: true, message: '请输入涨幅', trigger: 'blur' }
        ],
        die: [
          { required: true, message: '请输入跌幅', trigger: 'blur' }
        ]
      },
      editFormRules:{
       
        tradeWeek: [
          { required: true, message: '请选择交易周期', trigger: 'blur' }
        ],
        tradeTime: [
          { required: true, message: '请输入交易时间', trigger: 'blur' }
        ],
      
        openPrice: [
          { required: true, message: '请输入发行价格', trigger: 'blur' }
        ],
        buyMin: [
          { required: true, message: '请输入最小买入量', trigger: 'blur' }
        ],
        buyMax: [
          { required: true, message: '请输入最大买入量', trigger: 'blur' }
        ],
        sellMin: [
          { required: true, message: '请输入最小卖出量', trigger: 'blur' }
        ],
        sellMax: [
          { required: true, message: '请输入最大卖出量', trigger: 'blur' }
        ],
        feeBuy: [
          { required: true, message: '请输入买入手续费率', trigger: 'blur' }
        ],
        feeSell: [
          { required: true, message: '请输入卖出手续费率', trigger: 'blur' }
        ],
        tradeMin: [
          { required: true, message: '请输入单笔最小数量', trigger: 'blur' }
        ],
        tradeMax: [
          { required: true, message: '请输入单笔最大数量', trigger: 'blur' }
        ],
        sorting: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
       /* transactionAreaId: [
          { required: true, message: '请选择交易区域', trigger: 'blur' }
        ],*/
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
        zhang: [
          { required: true, message: '请输入涨幅', trigger: 'blur' }
        ],
        die: [
          { required: true, message: '请输入跌幅', trigger: 'blur' }
        ]
      },
      addLoading:false,//
      editLoading:false,//
      list: [       
      ],
      buyCoins:[{ value: '1', label: 'BTCX'},{ value: '2', label: 'HHt'}],
      sellCoins:[{ value: '1', label: 'BTC'},{ value: '2', label: 'CTC'}],
      transacitonArea:[],
      canReset: true,
      loading: false,
      marketId:''//市场id
    }
  },
  methods: {
    addCancel:function(){
      //取消添加
      this.$router.push(this.$parent.$route.matched[2].path);

      // this.$router.push("/deal/trademark");
    },

    //性别显示转换
    formatSex: function (row, column) {
      return row.userGender == 1 ? '启用' : row.userGender == 2 ? '禁用' : '未知';
    },
    handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
      this.fetchData();
    },

    //显示编辑界面
    handleEdit: function (index, row) {
   
        let para={
        marketId:this.marketId
       }
        trademark.info.r(para).then((res) => {
          console.log(res);
          if(res.data.retCode==1){
              this.editForm=res.data.data;
              let tradeWeekArr=this.editForm.tradeWeek.split(",");
              console.log(tradeWeekArr);
              /*for(var i=0;i<tradeWeekArr.length;i++){

              }*/
               tradeWeekArr.map(x=>{
                if(x=="1"){
                  tradeWeekArr.push('周一');
                }else if(x=="2"){
                  tradeWeekArr.push('周二');
                }else if(x=="3"){
                  tradeWeekArr.push('周三');
                }else if(x=="4"){
                  tradeWeekArr.push('周四');
                }else if(x=="5"){
                  tradeWeekArr.push('周五');
                }else if(x=="6"){
                  tradeWeekArr.push('周六');
                }else if(x=="7"){
                  tradeWeekArr.push('周日');
                }
               })
              // console.log(this.editForm.tradeWeek.split(","))
              // this.editForm.tradeWeek=this.editForm.tradeWeek.split(",");
              this.editForm.tradeWeek=tradeWeekArr;
              // this.editForm.status=this.editForm.status.toString();

          }else{
            this.$message(res.data.retMsg);
          }              
      })
    },
  
    addSubmit:function(){
      
      //新增数据提交
        this.$refs.addForm.validate((valid) => {
          if (valid) {
             let para = this.addForm;
             let tradeWeekArr=[];
             para.tradeWeek.map(x=>{
              if(x=="周一"){
                tradeWeekArr.push('1');
              }else if(x=="周二"){
                tradeWeekArr.push('2');
              }else if(x=="周三"){
                tradeWeekArr.push('3');
              }else if(x=="周四"){
                tradeWeekArr.push('4');
              }else if(x=="周五"){
                tradeWeekArr.push('5');
              }else if(x=="周六"){
                tradeWeekArr.push('6');
              }else if(x=="周日"){
                tradeWeekArr.push('7');
              }
             })
             // para.tradeWeek=para.tradeWeek.toString();
             para.tradeWeek=tradeWeekArr.toString();
            console.log(para);
            // return;
            trademark.add.r(para).then((res) => {
              if(res.data.retCode==1){
                //添加市场成功
                this.addFormVisible = false;
                this.$parent.fetchData();

                this.$router.push(this.$parent.$route.matched[2].path);
              }else{
                this.$message(res.data.retMsg);
              }
              
            });
          }else{
            console.log('error submit!!');
            return false;
          }
        })

    },
    editSubmit:function(){
      //编辑数据提交
      this.$refs.editForm.validate((valid) => {
          if (valid) {
             let para =this.editForm;
             para.marketId=this.marketId;
             let tradeWeekArr=[];
             para.tradeWeek.map(x=>{
              if(x=="周一"){
                tradeWeekArr.push('1');
              }else if(x=="周二"){
                tradeWeekArr.push('2');
              }else if(x=="周三"){
                tradeWeekArr.push('3');
              }else if(x=="周四"){
                tradeWeekArr.push('4');
              }else if(x=="周五"){
                tradeWeekArr.push('5');
              }else if(x=="周六"){
                tradeWeekArr.push('6');
              }else if(x=="周日"){
                tradeWeekArr.push('7');
              }
             })
             // para.tradeWeek=para.tradeWeek.toString();
             para.tradeWeek=tradeWeekArr.toString();

            // console.log(qs.stringify(para));
            console.log(para);
            // return;
            trademark.modify.r(para).then((res) => {
              console.log(res)
              if(res.data.retCode==1){
                //编辑市场成功
                this.editFormVisible = false;

                this.$parent.fetchData();

              this.$router.push(this.$parent.$route.matched[2].path);
              }else{
                this.$message(res.data.retMsg);
              }
              
            });
          }else{
            console.log('error submit!!');
            return false;
          }
      })
    },

    fetchData(init) {
      this.loading = true;
      /*if(!this.$_has([trademark.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }*/
      
      currency.request.r().then((res) => {
        console.log(res);
        if(res.data.retCode==1){
            this.list = res.data.data.list;   
            let currencyArr=[];
            if(this.list){
              this.list.map(x=>{
                currencyArr.push({label:x.name,value:x.coinId})
              })
              console.log(currencyArr)
              this.buyCoins=this.list;
              // this.buyCoins=currencyArr;
              // this.sellCoins=currencyArr;
              this.sellCoins=this.list;;
              // this.addForm.buyCoinId=currencyArr[0].value;
              // this.addForm.sellCoinId=currencyArr[1].value;
            }
        }else{
            this.$message(res.data.retMsg);

        }
        this.loading = false;
        

      });

    },
    fetchDataArea(){      
      //交易区域
     let para={
            configCode:'transArea',
      }
      trademark.areaList.r(para).then((res) => {
        console.log(res);
        if(res.data.retCode==1){
          if(res.data.data.totalRow>0){

            this.transacitonArea=res.data.data.list;

          }
        }else{
          this.$message(res.data.retMsg);          
        }        
   

      });
        
    },
    requestNotAllowed: function(){
      trademark.notAllowed.r();
    }
  },
  created() {
   /* this.isReleRole=this.$_has([trademark.releRolesUser]);
    this.isReleGroup=this.$_has([trademark.releGroupUser]);
    this.isEdit=this.$_has([trademark.modify]);
    this.isDel=this.$_has([trademark.remove]);
   
*/
    this.fetchData(true)
    this.routerPath=this.$route.path.split("/").pop();
     if(this.$route.query.id!=undefined&&this.$route.query.id!="undefined"&&this.$route.query.id!=""){
      this.marketId=this.$route.query.id;
      this.isEdit=true;
      this.handleEdit();//显示详情
    }
    this.fetchDataArea();

    

  }
}
</script>